<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <title>直角坐标系常用配置</title>
</head>

<body>
  <!-- 配置1 网格grid
  grid 是用来控制直角坐标系的布局和大小的
  x轴和y轴就是在grid的基础上进行绘制的
    显示grid --- show
    grid的边框----borderWidth borderColor
    grid的位置和大小
    left top right bottom 
    width height
 -->
  <!-- 配置2-----坐标轴axis 
  一个grid中最多有两种位置的x轴和y轴
  坐标轴类型type:
      value：数值轴，自动会从目标数据中读取数据
      category: 类目轴，该类型必须通过data设置类目数据
  显示位置position
    xAxis:可取值top,bottom
    yAxis:可取值left,right
-->

  <!-- 配置3 区域缩放dataZoom
  dataZoom 用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
  dataZoom 是一个数组，意味着可以配置多个区域缩放器
    类型 type
      slider 滑块
      inside 内置 依靠鼠标滚轮或者双指缩放
    指明产生作用的轴
      xAxisIndex 设置缩放组件控制的是哪个x轴，一般写0即可
      yAxisIndex 设置缩放组件控制的是哪个y轴，一般写0即可
    指明初始状态的缩放情况
      start 数据窗口范围的起始百分比
      end 数据窗口范围的结束百分比
-->

  <!-- 
  直角坐标系：柱状图、折线图、散点图
 -->
  <div style="width: 500px;height: 400px;"></div>
  <script>
    var mChart = echarts.init(document.querySelector('div'));
    var xDataArr = ['张三', '李四', '王五', '小明', '小红', '小张'];
    var yDataArr = [100, 40, 80, 26, 88, 70];
    var option = {
      grid: {
        show: true,
        borderWidth: 10,
        // borderColor: 'red'
        // top: 20
      },
      // 缩放区域
      dataZoom: [{
        type: 'slider',
        // type: 'inside'
        yAxisIndex: 0
      }],
      xAxis: {
        type: 'category',
        data: xDataArr,

      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '语文',
        type: 'bar',
        data: yDataArr,
        // 柱宽
        barWidth: 30,
        // 最大值最小值
        markPoint: {
          data: [{
            type: 'max',
            name: '最大值'
          }, {
            type: 'min',
            name: '最小值'
          }]
        },
        // 平均值
        markLine: {
          data: [{
            type: 'average',
            name: '平均值'
          }]
        }
      }]
    };
    mChart.setOption(option);
  </script>

</body>

</html>